<script setup>
import { watch } from 'vue'
import { useRoute, onBeforeRouteUpdate } from 'vue-router'

const route = useRoute()

watch(() => route.params.id, (newId, oldId) => {
  // 对路由变化做出响应...
  console.log(`watch 路由参数变化了，从 ${oldId} 变为 ${newId}`)
})

onBeforeRouteUpdate(async (to, from) => {
  // 对路由变化做出响应...
  console.log(`BeforeRouteUpdate 路由参数变化了，从 ${from.params.id} 变为 ${to.params.id}`)
})
</script>
<template>
    <div>
      <!-- 当前路由可以通过 $route 在模板中访问 -->
      User: {{ $route.params.id }}, Post: {{ $route.params.postId }}<br>
      <router-view />
    </div>
</template>